<template>
  <div class="app-container">
    <PageSearch
      :showSearch.sync="showSearch"
      :getList="getList"
      :handleQuery="handleQuery"
      :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                :placeholder="$t('sku编号')"
                v-model="queryParams.skuNo"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="spNo">
              <el-input
                :placeholder="$t('库位号')"
                v-model="queryParams.spNo"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="id">
              <el-input
                :placeholder="$t('序列号')"
                v-model="queryParams.id"
                clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item prop="scrapType">
              <el-select :placeholder="$t('报废类型')" clearable v-model="queryParams.scrapType">
                <el-option
                  v-for="item in out_warehouse_type_list"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                  :key="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
    </PageSearch>
    <el-table
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId">
      <!-- sku 库位号 序列号 产品名 日元单价 供应商 报废时间 报废类型 采购日期 -->
      <!-- sku -->
      <el-table-column
        align="center"
        width="150"
        show-overflow-tooltip
        prop="skuNo"
        :label="$t('sku编号')"
        :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div @click="handleEdit(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>
      <!-- 库位号 -->
      <el-table-column align="center" show-overflow-tooltip prop="spNo" :label="$t('库位号')" />
      <!-- 序列号 -->
      <el-table-column align="center" show-overflow-tooltip prop="id" :label="$t('库位号')" />
      <!-- 产品名 -->
      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" :label="$t('产品名')" />
      <!-- 日元单价 -->
      <el-table-column align="center" show-overflow-tooltip prop="price" :label="$t('日元单价')" />
      <!-- 供应商 -->
      <el-table-column align="center" show-overflow-tooltip prop="distrName" :label="$t('供应商')" />
      <!-- 报废时间 -->
      <el-table-column align="center" show-overflow-tooltip prop="scrapTime" :label="$t('报废时间')" />
      <!-- 报废类型 -->
      <el-table-column align="center" show-overflow-tooltip prop="scrapTypeName" :label="$t('报废类型')" />
      <!-- 采购日期 -->
      <el-table-column align="center" show-overflow-tooltip prop="purchaseTime" :label="$t('采购日期')" />
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" :isShowAll="false" ref="Skucontmoduler"></Skucontmoduler>
  </div>
</template>

<script>
import Skucontmoduler from '@/components/Skucontmoduler'
import { getPurchaseSkuScrapList } from '@/api/distribution/sku/stockScrapList'
import { useDict } from '@/utils/useDict'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: { Skucontmoduler },
  name: 'StockScrapList',
  data() {
    return {
      showSearch: false,
      out_warehouse_type_list: [],
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        value2: 1,
      },
    }
  },
  created() {
    this.getList()
    useDict('out_warehouse_type').then(({ out_warehouse_type }) => {
      this.out_warehouse_type_list = out_warehouse_type.filter((i) => i.dictValueRef == 'scrapped')
    })
  },
  methods: {
    relaod() {
      this.getList()
    },
    handleEdit(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformation')
    },
    // 提交申请
    submitForm() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
        }
      })
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getPurchaseSkuScrapList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
